<template>
  <div>
    <el-input
      v-model="filterText"
      placeholder="输入关键字进行过滤"/>

    <el-tree
      ref="tree"
      :data="data"
      :props="defaultProps"
      :filter-node-method="filterNode"
      class="filter-tree"
      default-expand-all/>
  </div>
</template>

<script>
import subjectApi from '@/api/subject'
export default {
  data() {
    return {
      filterText: '',
      data: [], // 后端提供查询一级二级课程分类嵌套集合的接口
      defaultProps: {
        children: 'children', // 树形图子节点集合属性名
        label: 'title' // 指定显示的树形图节点的名称属性
      }
    }
  },
  watch: {
    filterText(val) { // 监听data中filterText属性值改变的方法，每次改变会将最新值传入该函数
      // 调用el-tree筛选节点的方法[了解]
      this.$refs.tree.filter(val)
    }
  },
  created() {
    // 发起请求查询一二级课程分类嵌套集合 设置给data
    this.getNestedSubjects()
  },
  methods: {
    filterNode(val, subject) { // el-tree过滤数据的方法
      if (!val) return true // 如果val值为空，所有的节点都显示
      // 如果subject的title属性值中包含val 则显示 返回true
      return subject.title.toUpperCase().indexOf(val.toUpperCase()) !== -1
    },
    getNestedSubjects() {
      subjectApi.nestedSubjects().then(r => {
        this.data = r.data.items
      })
    }
  }
}
</script>

